<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/tower-logo.png">
    <title>韩小信-智能控制</title>
    <style>
        body {
            background-image: url("https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/bg-blue.webp");
        }

        .root {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .device {
            margin: 20px 0 20px 0;
        }

        .actions {
            display: flex;
            flex-direction: row;
            margin: 20px 0 20px 0;
            justify-content: center;

            button {
                margin: 0 10px 0 10px;
            }
        }

        .card {
            width: 250px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
        }

        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        .container {
            padding: 2px 16px;
        }

        .info {
            display: flex;
        }

        .title {
            font-weight: bold;
            margin-right: 10px;
        }

        .gallery {
            display: flex;
            margin: 20px 0 20px 0;
            justify-content: center;
        }

        .img1 {
            width: calc(100vw - 40px);
            margin-bottom: 150px;
            margin: 20px 0 20px 0;
        }

        .music {
            display: flex;
            margin: 20px 0 20px 0;
            justify-content: center;
        }

        .time {
            display: flex;
            margin: 20px 0 20px 0;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="device">
            <div class="card">
                <img id="logo" loading="lazy" src="https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/boat.webp"
                    alt="Avatar" style="width:100%">
                <div class="container">
                    <div class="info">
                        <div class="title">mcu</div><span id="machine">-</span>
                    </div>
                    <div class="info">
                        <div class="title">id</div> <span id="device_id">-</span>
                    </div>
                    <div class="info">
                        <div class="title">release</div> <span id="release">-</span>
                    </div>
                    <div class="info">
                        <div class="title">ip</div><span id="ip">-</span>
                    </div>
                    <div class="info">
                        <div class="title">gateway</div><span id="gateway">-</span>
                    </div>
                    <div class="info">
                        <div class="title">free memory</div><span id="free">-</span></span>
                    </div>
                    <div class="info">
                        <div class="title">alloc memory</div><span id="alloc">-</span>
                    </div>
                    <div class="info">
                        <div class="title">temperature</div><span id="temperature">-</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="time">current time: <span id="time"></span></div>
        <div class="actions">
            <button id="ledon">点亮LED</button>
            <button id="ledoff">关闭LED</button>
        </div>
        <div class="music">
            <audio src="https://cdn.hanxiaoxin.cn/iot/esp32/http-server/audios/%E6%96%AD%E4%BA%86%E7%9A%84%E5%BC%A6.m4a"
                autoplay="false" controls></audio>
        </div>

        <div class="gallery">
            <img class="img1" loading="lazy" src="https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/han-fang.webp"
                alt="friend">
        </div>
    </div>

    <script>
        const images = [
            'https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/boat.webp',
            'https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/fish.webp',
            'https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/moon-mountain.webp',
            'https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/moon-night.webp',
        ];

        const logoEle = document.getElementById("logo");
        const rand = parseInt(Math.random() * (images.length));
        const img_url = images[rand];
        logoEle.src = img_url;

        function updateTime() {
            const date = new Date()
            const timeEle = document.getElementById("time")
            // console.log(timeEle)
            if (timeEle) {
                timeEle.innerHTML = date.toLocaleTimeString()
            }
        }

        function sendRequest(path) {
            return new Promise((resolve) => {
                const xhr = new XMLHttpRequest()
                xhr.onreadystatechange = () => {
                    if (xhr.readyState !== XMLHttpRequest.DONE) {
                        return
                    }
                    try {
                        const resJSON = JSON.parse(xhr.response)
                        console.log('response: ', resJSON)
                        resolve(resJSON)
                    } catch (e) {
                        console.error(e)
                    }
                }
                const origin = window.location.origin
                xhr.open('get', `${origin}${path}`)
                xhr.send()
            })
        }

        const timer = setInterval(() => {
            // console.log(1111)
            updateTime()
        }, 500);

        sendRequest('/api/info').then(res => {
            console.log(res)
            device_info = res["device_info"]
            device_id = device_info["device_id"]
            platform = device_info["platform"]
            flash_size = device_info["flash"]["size"]
            free_m = device_info["gc"]["free_m"]
            alloc_m = device_info["gc"]["alloc_m"]
            uname = device_info["uname"]
            sysname = uname["sysname"]
            release = uname["release"]
            machine = uname["machine"]
            const idEle = document.getElementById("device_id")
            idEle.innerHTML = device_id

            const machineEle = document.getElementById("machine")
            machineEle.innerHTML = platform

            const releaseEle = document.getElementById("release")
            releaseEle.innerHTML = release
            const freeEle = document.getElementById("free")
            const allocEle = document.getElementById("alloc")
            freeEle.innerHTML = free_m + 'KB'
            allocEle.innerHTML = alloc_m + 'KB'

            temperature = device_info["temperature"]
            const tempEle = document.getElementById("temperature")
            tempEle.innerHTML = temperature + "℃"

            const ip = device_info["ifconfig"]["ip"]
            const gateway = device_info["ifconfig"]["gateway"]
            const ipEle = document.getElementById("ip")
            const gatewayEle = document.getElementById("gateway")
            ipEle.innerHTML = ip
            gatewayEle.innerHTML = gateway
        })

        const buttonLedOn = document.getElementById("ledon")
        const buttonLedOff = document.getElementById("ledoff")

        buttonLedOn.addEventListener('click', () => {
            sendRequest('/api/led_on').then(res => {
                console.log('led_on ok')
            })
        })

        buttonLedOff.addEventListener('click', () => {
            sendRequest('/api/led_off').then(res => {
                console.log('led_off ok')
            })
        })
    </script>
</body>

</html>